<!--
描述：教学安排-校历信息-新增组件
开发人：hqj
开发日期：2018年8月3日
-->

<template lang="pug">
    kalix-dialog.user-add(bizKey="schoolCalendar" ref="kalixBizDialog" v-bind:form-model.sync="formModel" v-bind:targetURL="targetURL")
        div.el-form(slot="dialogFormSlot")
            el-form-item.s-flex(label="学年" prop="schoolYear" v-bind:rules="rules.schoolYear" v-bind:label-width="labelWidth")
                div.s-flex
                    kalix-date-picker(v-model="formModel.schoolYear" type="year" v-on:change="change")
                    | —
                    el-input(v-model="nextSchoolYear" disabled)
            div.table-title 第一学期
            div.s-flex
                el-form-item.s-flex_item(label="上课起始日期" prop="firstClassStartDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.firstClassStartDate")
                el-form-item.s-flex_item(label="上课结束日期" prop="firstClassEndDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.firstClassEndDate")
            div.s-flex
                el-form-item.s-flex_item(label="假期开始日期" prop="firstHolidayStartDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.firstHolidayStartDate")
                el-form-item.s-flex_item(label="假期结束日期" prop="firstHolidayEndDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.firstHolidayEndDate")
            div.table-title 第二学期
            div.s-flex
                el-form-item.s-flex_item(label="上课起始日期" prop="secondClassStartDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.secondClassStartDate")
                el-form-item.s-flex_item(label="上课结束日期" prop="secondClassEndDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.secondClassEndDate")
            div.s-flex
                el-form-item.s-flex_item(label="假期开始日期" prop="secondHolidayStartDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.secondHolidayStartDate")
                el-form-item.s-flex_item(label="假期结束日期" prop="secondHolidayEndDate" v-bind:label-width="labelWidth")
                    kalix-date-picker(v-model="formModel.secondHolidayEndDate")
</template>

<script type="text/ecmascript-6">
    import FormModel from './model'
    import {SchoolCalendarURL} from '../../config.toml'

    export default {
        name: 'SchoolCalendarAdd',
        data() {
            return {
                formModel: Object.assign({}, FormModel),
                rules: {
                    schoolYear: [{required: true, message: '请选择学年', trigger: 'change'}]
                },
                targetURL: SchoolCalendarURL,
                nextSchoolYear: '',
                labelWidth: '120px'
            }
        },
        components: {},
        mounted() {
            setTimeout(() => {
                this.setNextSchoolYear()
            }, 20)
        },
        methods: {
            setNextSchoolYear() {
                if (this.formModel.schoolYear) {
                    this.nextSchoolYear = this.formModel.schoolYear * 1 + 1
                } else {
                    this.nextSchoolYear = ''
                }
            },
            change(value) {
                if (value) {
                    let date = new Date(value)
                    this.nextSchoolYear = date.getFullYear() * 1 + 1
                } else {
                    this.nextSchoolYear = ''
                }
            }
        }
    }
</script>


